<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header title="闯关奖励"></Header>
		<view class="top_box">
			<view class="t_one">
				奖励介绍
			</view>
			<view class="t_tow">
				镇妖塔游戏奖励介绍
			</view>
			<view class="box1">
				参与闯关达到指定塔层，享受每日分红
			</view>
			<view class="box1">
				成功闯关获得水晶或实物，失败无任何损失
			</view>
			<view style="display: none;" class="box1">
				奖励达成条件<br>
				<text>1.达到知道层数</text><br><text>2.必须当日参加一次闯关或者正在闯关中</text>
			</view>
			<view class="box1">
				奖励结算时间<br>
				<text>每日 <text class="color">23:59</text>结算当日奖励</text>
			</view>
			<!-- /下方盒子 -->
			<view class="box2">
				<view class="top">
					塔层水晶奖励
				</view>
				<view class="son_list" v-for="(item, index) in list" :key="index">
					<view class="let">
						{{ item.left }}
					</view>
					<view style="display: none;" class="rig rig2">
						{{ item.cen }}
					</view>
					<view class="rig" :class="[index == 0 ? 'rig2' : 'rig']">
						{{ item.right }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					left: '层数',
					cen: '战斗力',
					right: '奖励水晶'
				}, {
					left: '300',
					cen: '150000',
					right: '150'
				}, {
					left: '400',
					cen: '200000',
					right: '200'
				}, {
					left: '500',
					cen: '250000',
					right: '250'
				}, {
					left: '600',
					cen: '300000',
					right: '300'
				}, {
					left: '700',
					cen: '350000',
					right: '350'
				}, {
					left: '800',
					cen: '400000',
					right: '400'
				}, {
					left: '900',
					cen: '450000',
					right: '450'
				}, {
					left: '1000',
					cen: '500000',
					right: '500'
				}, ]
			}

		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.box2 {
		width: 100%;
		padding: 10px;
		background: #FFF9F3;
		border-radius: 6px;
		margin-top: 10px;

		.son_list {
			display: flex;
			align-items: center;
			margin: 5px 0;

			.let {
				flex: 1;
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;

				background: #FFFFFF;
				border-radius: 5px;
				border: 1px solid #FEE1C3;
				font-size: 12px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #696969;
			}

			.rig {
				flex: 1;
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border-radius: 5px;
				border: 1px solid #FEE1C3;
				font-size: 12px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #239D4C;
				margin-left: 10px;
			}

			.rig2 {
				color: #696969;
			}
		}

		.top {
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #343434;
		}
	}

	.top_box {
		width: 90%;
		background: #FFFFFF;
		border-radius: 19px;
		margin: 0 auto;
		padding: 20px 10px;

	}


	.box1 {
		width: 100%;
		padding: 10px;
		background: #FFF9F3;
		border-radius: 6px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #343434;
		margin-top: 15px;
		line-height: 1.5;

		.color {
			color: #239D4C;
		}

		text {

			font-size: 12px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #696969;
		}
	}

	.t_one {
		font-size: 18px;
		font-family: SourceHanSansCN-Bold, SourceHanSansCN;
		font-weight: bold;
		color: #343434;

	}

	.t_tow {
		font-size: 14px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #696969;
	}

	.mian {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background: linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%);
	}
</style>